<template>
  <component
    v-if="!ui.hidden && ['array', 'object'].includes(service.widget)"
    :is="SF_COLLECTION[service.widget]"
    :field="field"
    :keyPath="keyPath"
    :service="service"
  />
  <template v-else-if="!ui.hidden">
    <el-form-item
      v-show="visible"
      :prop="field"
      :label-width="service.labelWidth"
      :label="params.title"
      :rules="service.validate"
    >
      <component
        :is="SF_COLLECTION[service.widget]"
        :field="field"
        :keyPath="keyPath"
        :service="service"
      />
    </el-form-item>
  </template>
</template>

<script lang="ts" setup name="lc-item">
import { TItemOption } from "../type";
import { SF_COLLECTION } from "../index";
import { computed, inject, reactive, watchEffect } from "vue";
import { SFService } from "../sf.service";
const props = defineProps<TItemOption>();
const ui = computed(() => props.service.ui);
const params = computed(() => props.service.params);
const visibleParams = ui?.value?.visibleIf || {};
const visibleIf = reactive({});
const sf = inject<SFService>("sf-service");

const setVisible = () => {
  const ok =
    ui?.value?.visibleModa === "one"
      ? Object.keys(visibleIf).some(r => visibleIf[r])
      : Object.keys(visibleIf).every(r => visibleIf[r]);

  sf.getProperty(props.keyPath)?.setVisible(ok);
};
const visible = computed(() => {
  if (!Object.keys(visibleIf).length) {
    return true;
  }
  const ok =
    ui?.value?.visibleModa === "one"
      ? Object.keys(visibleIf).some(r => visibleIf[r])
      : Object.keys(visibleIf).every(r => visibleIf[r]);
  return ok;
});

if (Object.keys(visibleParams).length) {
  Object.keys(visibleParams).forEach(r => {
    visibleIf[r] = true;
  });
  watchEffect(() => {
    Object.keys(visibleParams).forEach(k => {
      visibleIf[k] = visibleParams[k]?.(sf.getVaule(k));
      setVisible();
    });
  });
}
</script>
<style></style>
../type
